<!-- 139 -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button
        type="primary"
        :loading="searchBtnLoading"
        @click="handleSearch"
        >{{ $t("common_query") }}</a-button
      >
    </a-space>
    <t-query-form
      layout="inline"
      group="PassGlassByOperation"
      ref="queryForm"
      :rules="rules"
      :model="queryForm"
    >
      <a-form-item :label="$t('T9_shopId')" name="shopId">
        <a-select
          v-model:value="queryForm.shopId"
          :placeholder="$t('common_pleaseSelect')"
          class="select-width"
        >
          <a-select-option
            v-for="item in options.shopIdList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('T9_operation')" name="operation">
        <a-select
          v-model:value="queryForm.operation"
          allow-clear
          :placeholder="$t('common_pleaseSelect')"
          class="select-width"
        >
          <a-select-option
            v-for="item in options.operationList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('T9_productType')" name="productType">
        <a-select
          v-model:value="queryForm.productType"
          allow-clear
          :placeholder="$t('common_pleaseSelect')"
          class="select-width"
        >
          <a-select-option
            v-for="item in options.productTypeList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('T9_productId')" name="productId">
        <a-select
          v-model:value="queryForm.productId"
          show-search
          allow-clear
          :placeholder="$t('common_pleaseSelect')"
          class="select-width"
        >
          <a-select-option
            v-for="item in options.productIdList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('T9_ownerType')" name="ownerType">
        <a-select
          v-model:value="queryForm.ownerType"
          allow-clear
          :placeholder="$t('common_pleaseSelect')"
          class="select-width"
        >
          <a-select-option
            v-for="item in options.ownerTypeList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('T9_owner')" name="ownerId">
        <a-select
          v-model:value="queryForm.ownerId"
          allow-clear
          :placeholder="$t('common_pleaseSelect')"
          class="select-width"
        >
          <a-select-option
            v-for="item in options.ownerIdList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('T9_date')" name="date">
        <a-range-picker
          allow-clear
          v-model:value="queryForm.date"
          :placeholder="[$t('common_startDate'), $t('common_endDate')]"
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
        />
      </a-form-item>
    </t-query-form>
    <a-descriptions
      bordered
      :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
    >
      <a-descriptions-item :label="$t('T9_cstOutQty')">{{
        list.cstOutQty
      }}</a-descriptions-item>
      <a-descriptions-item :label="$t('T9_glassOutQty')">{{
        list.glassOutQty
      }}</a-descriptions-item>
      <a-descriptions-item :label="$t('T9_panelOutQty')">{{
        list.panelOutQty
      }}</a-descriptions-item>
    </a-descriptions>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-1"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_cstList")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button>{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <t-table align="center" :loading="searchBtnLoading" :data="tableData">
      <t-column field="eventTime" :title="$t('T9_eventTime')" />
      <t-column field="eventName" :title="$t('T9_eventName')" />
      <t-column field="eventUser" :title="$t('T9_eventUser')" />
      <t-column field="cstId" :title="$t('T9_cstId')" />
      <t-column field="glassQty" :title="$t('T9_glassQty')" />
      <t-column field="panelQty" :title="$t('T9_panelQty')" />
      <t-column field="productType" :title="$t('T9_productType')" />
      <t-column field="owner" :title="$t('T9_owner')" />
      <t-column field="ownerType" :title="$t('T9_ownerType')" />
      <t-column field :title="$t('T9_cstGrade')" />
      <t-column field="priority" :title="$t('T9_priority')" />
      <t-column field="runMode" :title="$t('T9_runMode')" />
      <t-column field="productId" :title="$t('T9_productId')" />
      <t-column field="productVer" :title="$t('T9_productVer')" />
      <t-column field="route" :title="$t('T9_route')" />
      <t-column field="oldOperation" :title="$t('T9_oldOperation')" />
      <t-column field="operation" :title="$t('T9_operation')" />
      <t-column field="description" :title="$t('T9_desc')" />
      <t-column field="eqpId" :title="$t('T9_eqpId')" />
      <t-column field="shipGroupId" :title="$t('T9_shipGroupId')" />
      <t-column field="groupId" :title="$t('T9_groupId')" />
      <t-column field :title="$t('T9_holdState')" />
      <t-column field :title="$t('T9_fastRunGlassQty')" />
    </t-table>
  </div>
</template>

<script>
  import moment from 'moment'
  import * as api from '@/api/common'
  import { shopIdList } from '@/views/options'
  import initOptionsMixin from '@/mixins/initOptionsMixin'

  const basicParams = {
    dtoName: 'CstListByMachineDTO',
    queryId: 'GetThroughputByOperation',
    version: '80001',
    menuName: 'passGlassByOperation',
    usage: 'queryCstList'
  }
  export default {
    name: 'PassGlassByOperation',
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        list: {
          tableData: [],
          cstOutQty: 0,
          glassOutQty: 0,
          panelOutQty: 0
        },
        queryForm: {
          shopId: undefined,
          operation: undefined,
          productType: undefined,
          productId: undefined,
          ownerType: undefined,
          ownerId: undefined,
          date: []
        },
        options: {
          shopIdList,
          operationList: [],
          productTypeList: [],
          productIdList: [],
          ownerTypeList: [],
          ownerIdList: []
        },
        rules: {
          shopId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ]
        }
      }
    },
    watch: {
      'queryForm.shopId': function (shopId) {
        if (shopId) {
          this.initOptions([{ name: 'operation', params: { shopId } }])
        } else {
          this.operation = undefined
          this.options.operationList = []
        }
      },
      'queryForm.productType': function (productType) {
        if (productType) {
          this.initOptions([
            {
              name: 'productId',
              params: { shopId: this.queryForm.shopId, productType }
            }
          ])
        } else {
          this.productId = undefined
          this.options.productIdList = []
        }
      },
      'queryForm.ownerType': function (ownerType) {
        if (ownerType) {
          this.initOptions([
            {
              name: 'ownerId',
              params: { shopId: this.queryForm.shopId, ownerType }
            }
          ])
        } else {
          this.ownerId = undefined
          this.options.ownerIdList = []
        }
      }
    },
    created() {
      this.initOptions([
        { name: 'productType', params: null },
        { name: 'ownerType', params: null }
      ])
    },
    methods: {
      moment,
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            const params = { ...this.queryForm, ...basicParams }
            if (params.date.length > 0) {
              params.startTime = params.date[0].format('YYYY-MM-DD HH:mm')
              params.endTime = params.date[1].format('YYYY-MM-DD HH:mm')
            }
            api
              .getList(params)
              .then((res) => {
                this.list.tableData = res.cstListByMachineDTOList || []
                this.list.cstOutQty = res.cstOutQty
                this.list.glassOutQty = res.glassOutQty
                this.list.panelOutQty = res.panelOutQty
                this.searchBtnLoading = false
                console.log(res)
              })
              .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  }
</script>
<style lang='less' scoped>
.select-width {
  width: 120px;
}
</style>
